var chinaList=JSON.parse(sessionStorage.getItem("chinaList"));
Vue.component("cityChoice",{
    props:["message","list","number"],
    template:' <div class="cityChoice">\n' +
    '                <div class="screen-title">{{message}}</div>\n' +
    '                <div class="chooseCity-cent">\n' +
    '                    <div class="chooseCity-province">\n' +
    '                        <span v-for="item in chinaList.provinces" :class="{active:item.code==data.provinceId}" @click="getCity(item.code,item.name)">{{item.name}}</span>\n' +
    '                    </div>\n' +
    '                    <div class="chooseCity-city">\n' +
    '                        <span v-for="item in citiesList" :class="{active:item.code==data.cityId}" @click="getAreas(item.code,item.name)">{{item.name}}</span>\n' +
    '                    </div>\n' +
    '                    <div class="chooseCity-area">\n' +
    '                        <span v-for="item in areasList" @click="choiceOK(item.code,item.name)">{{item.name}}</span>\n' +
    '                    </div>\n' +
    '                </div>\n' +
    '            </div>',
    data: function () {
        return {
            chinaList:{
                provinces:[],//省
                cities:[],//市
                areas:[]//县
            },//中国省市列表
            data:{
                provinceId:"",
                provinceName:"",
                cityId:"",
                cityName:"",
                areasId:"",
                areasName:""
            },
            citiesList:[],//市列表
            areasList:[]//区列表
        }
    },
    mounted:function(){
        this.getChinaList();
    },
    methods:{
        //获取中国省市区列表
        getChinaList:function(){
            var that=this;
            if(chinaList){
                that.chinaList=chinaList;
            }else{
                this.ajax({url:"/selfMedia/getChinaList",data:{version:that.version},dataType:"json",method:"post"},function(b){
                    if(b.json.code==0&&b.json.data){
                        that.chinaList=b.json.data;
                        sessionStorage.setItem("chinaList",JSON.stringify(that.chinaList));
                        //console.log(that.chinaList)
                    }else{
                        vm.$refs.prompt.toast("获取省市列表失败！")
                    }
                });
            }
        },
        //获取市
        getCity:function(code,name){
            console.log(code);
            var that=this;
            that.citiesList=[];
            that.areasList=[];
            that.data.provinceId=code;
            that.data.provinceName=name;
            that.chinaList.cities.forEach(function(item,index){
                if(item.provinceId==code){
                    that.citiesList.push(item);
                }
            });
            //console.log(that.citiesList);
        },
        //获取区
        getAreas:function(code,name){
            console.log(code);
            var that=this;
            that.areasList=[];
            that.data.cityId=code;
            that.data.cityName=name;
            that.chinaList.areas.forEach(function(item,index){
                // console.log(item.code)
                if(item.cityId==code){
                    //console.log(item.name);
                    that.areasList.push(item);
                }
            });
            //console.log(that.areasList);
        },
        //选择完成
        choiceOK:function(code,name){
            var that=this;
            that.data.areasId=code;
            that.data.areasName=name;
            //console.log(that.data);
            that.$emit("choice",that.data);
            that.$emit("close");
        }
    }
});